//测试Ext.dom.Helper的方法
Ext.onReady(function() {
	
	/**
	 * createHtml或markup方法, 两者的作用完全相同
	 * 可使用的配置参数:
	 * tag - 元素的标签名.
	 * children or cn - 被创建和可链接的同种元素的定义对象的数组. 其可以随你愿意嵌套多深的级次.
	 * cls - 元素的class属性.根据DomHepler使用的是fragments还是DOM,决定该属性是以HTML片段中的"class"属性为结束，还是一个DOM节点的类名为结束.
	 * html - 元素的innerHTML.
	 */
	var html = Ext.DomHelper.createHtml({
		tag: "ol",
		children: [
			{
				tag: "li",
				html: "第一个孩子",
				cn: [
					//此节点说明其实不只可以使用上面说明的属性，还可以使用此种节点本就有的节点
					{
						tag: "input",
						type: "text",
						value: "默认值"
					}
				]
			},
			{
				tag: "li",
				html: "第二个孩子"
			}
		]
	});
	console.log(html);
	
	//createDom方法    生成的是原生的dom节点，不建议使用
	
	/**
	 * append方法, 这个方法很好用
	 * 参数:(String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement])
	 * 最后一个参数可选，如果传入true返回Ext.Element类型，否则原生dom类型
	 */ 
	Ext.DomHelper.append(Ext.getBody(), {
		tag: "span",
		html: "我是append的内容"
	});
	//上面的还可以写为:
	Ext.DomHelper.append(Ext.getBody(), "<div id='d1'>我是插入的div</div>");	
	
	/**
	 * insertHTML方法, 参数:
	 * ( String where, HTMLElement/TextNode el, String html )
	 * where是指插入的位置，可取:beforeBegin, afterBegin, beforeEnd, afterEnd
	 */
	Ext.DomHelper.insertHtml("beforeEnd", Ext.getDom("d1"), "<div>insertHtml插入</div>");
	
	/**
	 * overwrite方法, 覆盖指定的dom节点, 参数如下:
	 * ( String/HTMLElement/Ext.Element el, Object/String o, [Boolean returnElement] )
	 * 注意所谓的覆盖是覆盖给定元素的innerHTML，而不是元素本身
	 */
	Ext.DomHelper.overwrite("d1", "<div>覆盖的div</div>");
	
	/**
	 * createTemplate方法, 创建一个模板, 参数:
	 * (Object o)
	 * 返回的是Ext.Template类的对象
	 */
	var template = Ext.DomHelper.createTemplate("<h2>{placeholder}</h2>");
	template.overwrite("d1", {
		placeholder: "来自模板的内容"
	});
	
	/**
	 * applyStyles方法, 参数：
	 * ( String/HTMLElement el, String/Object/Function styles )
	 */
	Ext.DomHelper.applyStyles("d1", {
		backgroundColor: "green"
	});
	
});